<template>
    <div class="zh-ebrochure-map">
        <div id="map-container" class="map-container"></div>
    </div>
</template>
<script setup lang="ts">
    import AMapLoader from '@amap/amap-jsapi-loader'
    import poiMarker from '@/assets/images/ebrochure/poi_marker.png'
    const positionlnglat:any = [113.07436,23.043951]

    const markerPoint = () => {
        AMapLoader.load({
            key: "dff560d7ae1b5d7633cc4a278a138be2", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ['AMap.ToolBar', 'AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.AutoComplete']
        }).then((AMap) => {
            let map = new AMap.Map("map-container", {
            // 设置地图容器id
            viewMode: "2D", //  是否为3D地图模式
            zoom: 14, // 初始化地图级别
            center: positionlnglat, //中心点坐标
            resizeEnable: true,
            });

            const marker = new AMap.Marker({
                position:positionlnglat,
                icon:poiMarker,
                anchor: "top-center",
                offset: new AMap.Pixel(-10, -10),
            })

            
            const geocoder = new AMap.Geocoder({ city: "" });
            // 为地图注册click事件获取鼠标点击出的经纬度坐标
			// map.on("click", (e: { lnglat: { getLng: () => string; getLat: () => string } }) => {
				
			// });
            map.add(marker)
        }).catch((e) => {
            console.log(e);
        })
    }

    markerPoint()
</script>
<style lang="scss" scope>
  .zh-ebrochure-map {
        .amap-icon {
            width:10px;
            height:10px;
        } 
    }
</style>